<template>
  <a-modal
    v-model:open="visible"
    title="日志详情"
    centered
    :width="600"
    :maskClosable="false"
    :footer="null"
    @cancel="onCancel"
  >
    <div
      class="mt-24"
      style="max-height: 600px; overflow-y: auto; overflow-x: hidden;"
    >
      <a-form
        :model="formState"
        name="adminlog-detail"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 21 }"
        autocomplete="off"
      >
        <a-form-item label="Param">
          {{ formState.param }}
        </a-form-item>
        <a-form-item label="Result">
          {{ formState.result }}
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { adminLog } from "@/api"; // 根据你的路径修改

interface PropInterface {
  id: number;
  open: boolean;
  onCancel: () => void;
}

const props = defineProps<PropInterface>();
const emit = defineEmits(["update:open"]);

const visible = ref(props.open);

watch(
  () => props.open,
  (val) => {
    visible.value = val;
    if (val && props.id > 0) {
      getDetail();
    }
  },
  { immediate: true }
);

const formState = ref({
  param: "",
  result: "",
});

const getDetail = async () => {
  const res = await adminLog.adminLogDetail(props.id);
  formState.value.param = res.data.param;
  formState.value.result = res.data.result;
};

const onCancel = () => {
  emit("update:open", false);
  props.onCancel && props.onCancel();
};
</script>
